<template>
    <el-dialog v-model="visible" :title="title" width="500px">
        <el-form :model="formData" ref="formRef" :rules="rules" label-width="80px">
            <el-form-item label="父级权限">
                <el-tree-select
                    v-model="formData.parentId"
                    :data="permTree"
                    :props="treeProps"
                    check-strictly
                    clearable
                    :render-after-expand="false"
                    node-key="id"
                    placeholder="请选择父级权限"
                />
            </el-form-item>
            <el-form-item label="权限名称" prop="name">
                <el-input v-model="formData.name" placeholder="请输入权限名称" />
            </el-form-item>
            <el-form-item label="权限类型" prop="type">
                <el-select v-model="formData.type" placeholder="请选择权限类型">
                    <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="权限" v-if="formData.type != '1'">
                <el-input v-model="formData.perm" placeholder="请输入权限" />
            </el-form-item>
            <el-form-item label="排序">
                <el-input-number v-model="formData.sort" :min="1"/>
            </el-form-item>
            <el-form-item label="图标" v-if="formData.type != '3'">
                <el-input :prefix-icon="formData.icon" v-model="formData.icon" placeholder="请输入图标" @dblclick="showIconDialog"/>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="close">取消</el-button>
                <el-button type="primary" @click="addOrUpdate">确认</el-button>
            </div>
        </template>
    </el-dialog>
    <IconDialog ref="iconDialogRef"></IconDialog>
</template>

<script setup>
import { reactive, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import {addReq,updateReq} from '@/api/sys/perm/index.js'
import IconDialog from '@/components/Icon.vue'

const visible = ref(false)

const formData = reactive({
    id:'',
    parentId: '',
    name: '',
    type: '',
    sort: 1,
    icon: ''
})

const rules = reactive({
    name: [{ required: true, message: '请输入权限名称', trigger: 'blur' } ],
    type: [{ required: true, message: '请选择权限类型', trigger: 'blur' }],
})

const props = defineProps({
    querySelective: Function,
    permTree: Array,
})

const title = ref('')
const actionType = ref('')
const open = (type, row) => {
    if (type == 'add') {
        actionType.value = type
        title.value = '添加权限'
        formData.id = ''
        formData.parentId =  ''
        formData.name = ''
        formData.type = ''
        formData.perm = ''
        formData.sort = 1
        formData.icon = ''
        formRef.value?.resetFields()
    }
    if (type == 'update') {
        actionType.value = type
        title.value = '修改权限'
        formData.id = row.id
        formData.parentId = (row.parentId == '0' ? '' : row.parentId)
        formData.name = row.name
        formData.type = row.type
        formData.perm = row.perm
        formData.sort = row.sort
        formData.icon = row.icon
    }
    visible.value = true;
}

defineExpose({
    open
})


const close = () => {
    visible.value = false;
}

const formRef = ref()

const addOrUpdate = async () => {
    const valid = await formRef.value?.validate() // 改变这一行
    if (valid) {
        formData.parentId = (formData.parentId == '' ? '0' : formData.parentId)
        if (actionType.value == 'add') {
            const res = await addReq(formData);
            if (res.code == 200) {
                // 添加成功！
                ElMessage.success(res.message)
                // 查询列表
                props.querySelective();
                close();
            }
        }
        if (actionType.value == 'update') {
            const res = await updateReq(formData);
            if (res.code == 200) {
                // 添加成功！
                ElMessage.success(res.message)
                // 查询列表
                props.querySelective();
                close();
            }
        }
    }
}

const treeProps = ref({
    label:"name"
})

const typeList = ref([
    { label: '目录', value: '1' },
    { label: '菜单', value: '2' },
    { label: '按钮', value: '3' },
])

const iconDialogRef = ref()
const showIconDialog = () => {
    iconDialogRef.value?.open()
}

// 监听子组件传的IconDialogRef.value?.selectedIcon的变化
// 监听 selectedIcon 变化
watch(
  () => iconDialogRef.value?.selectedIcon,
  (newVal, oldVal) => {
    if(newVal) {
        formData.icon = newVal
    }
  },
  {
    deep: true,    // 深度监听对象变化
    immediate: true // 立即触发一次
  }
)
</script>